<template>
  <div>
      <header>
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            >
            <template #left>
                <van-icon name="chat-o" class="iconleft"/>
            </template>
            <template #action>
                <van-icon name="shopping-cart-o" class="iconright"/>
            </template>
        </van-search>
      </header>
      <main>
          <!-- 侧边导航 -->
        <van-sidebar v-model="activeKey">
            <div v-for="(item,index) in catelist" :key="index">
                <van-sidebar-item>
                    <template #title>
                        {{item}}
                    </template>
                </van-sidebar-item>
            </div>
        </van-sidebar>
        <div>
            <router-view></router-view>
        </div>
      </main>
  </div>
</template>

<script>
export default {
    data() {
        return {
            value:'', // 搜索框绑定值
            activeKey: 0, // 导航选中
            catelist: [
                '正在流行',
                '上衣',
                '裤子',
                '裙子',
                '内衣',
                '女鞋',
                '男友',
                '包包',
                '运动',
                '配饰',
                '美妆',
                '个护',
                '家居',
                '百货',
                '母婴',
                '食品',
            ]
        };
    },
    methods: {
        onSearch(){

        }
    }
}
</script>

<style  lang="stylus" scoped>
html
body
  weight 100%
  height 100%
  .van-search
    padding 10px
    .iconleft
      padding-right 10px
    .iconright
      padding 8px 0 0 4px
.van-icon
  color #9b9b9b
  font-size 21px
.van-search__action
    height 38px
    line-height 38px

.van-sidebar-item 
    line-height 10px
.van-sidebar
    width 90px
main 
    display flex
</style>